<template>
  <van-nav-bar
    :fixed="fixed"
    :class="theme"
    :title="title"
    :left-arrow="leftArrow"
    :border="border"
    @click-left="onClickLeft"
    @click-right="onClickRight"
  >
    <template #left v-if="leftArrow">
      <img :src="require(`@/assets/images/basic/${leftIcon}_${theme}@2x.png`)" class="iconimg" alt="" />
    </template>
    <template #right>
      <img :src="shareIcon" class="iconimg" alt="" v-if="share" @click="onShare" />
      <img :src="rightIcon" class="iconimg" alt="" v-if="search" />
      <span class="van-nav-bar__message" v-if="message" @click="$router.push('/my/notify')">
        <van-badge dot v-show="messageCount" />
        <img :src="require(`@/assets/images/basic/nav_message_${theme}@2x.png`)" class="iconimg" alt="" />
      </span>
      <span class="right-text" v-if="apply" @click="onApply">申请</span>
      <span class="right-text" v-if="setting" @click="onSetting">设置</span>
      <van-button
        class="btn"
        type="info"
        size="small"
        v-if="addbtn"
        @click="$router.push('/propertyManagement/AttendanceClock/Add')"
      >
        新增
      </van-button>
      <slot name="custom"></slot>
    </template>
  </van-nav-bar>
</template>
<script>
import { mapState } from 'vuex'
import My from '@/api/my'
export default {
  props: {
    theme: {
      type: String,
      default: 'blue'
    },
    fixed: {
      type: Boolean,
      default: true
    },
    title: {
      type: String
    },
    leftArrow: {
      type: Boolean,
      default: true
    },
    leftIcon: {
      type: String,
      default: 'nav_back'
    },
    search: {
      type: Boolean,
      default: false
    },
    message: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    apply: {
      type: Boolean,
      default: false
    },
    setting: {
      type: Boolean,
      default: false
    },
    share: {
      type: Boolean,
      default: false
    },

    addbtn: {
      type: Boolean,
      default: false
    },

    isCustomBack: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  data() {
    return {
      messageIcon: require('@/assets/images/basic/nav_message_white@2x.png'),
      rightIcon: require('@/assets/images/basic/nav_search_white@2x.png'),
      shareIcon: require('@/assets/images/basic/nav_share_blue@2x.png'),
      messageCount: 0,
      webSocket: null
    }
  },
  created() {
    this.user.token && this.getMessageCount()
    this.user.token && this.setMessageSocket()
  },
  methods: {
    // 获取通知消息
    getMessageCount() {
      My.Notify.count().then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.messageCount = data
        }
      })
    },
    setMessageSocket() {
      this.webSocket = new WebSocket(`${this.$config.webSocketURl}message_alter/${this.user.token}`)
      this.webSocket.onmessage = e => {
        console.log('接收成功', e)
        const data = JSON.parse(e.data)
        const resData = JSON.parse(data.data)
        if (resData.regionCode === this.user.gridCode) {
          this.messageCount = 1
        }
      }
      this.webSocket.onerror = () => {
        this.webSocket && this.webSocket.close()
      }
    },
    onClickLeft() {
      if (this.isCustomBack) {
        this.$emit('navBack')
      } else {
        this.$router.go(-1)
      }
      // this.$emit('onClickLeft')
    },
    onClickRight() {
      // this.$emit('onClickRight')
    },
    // 申请
    onApply() {
      this.$router.push('/login/apply')
    },
    // 设置
    onSetting() {
      this.$router.push('/my/personal')
    },
    // 分享
    onShare() {}
  },
  beforeDestroy() {
    this.webSocket && this.webSocket.close()
  }
}
</script>
<style lang="less">
@import '~@/assets/style/base/color.less';
.van-nav-bar {
  background-color: #ffffff;
  z-index: 3001;
  &.white {
    background: linear-gradient(90deg, #1bcec5 0%, #3cbdd0 100%);
    .van-icon,
    .van-nav-bar__title {
      color: #ffffff;
    }
    .right-text {
      color: #ffffff;
    }
  }
  &.transparent {
    background: transparent !important;
    .van-icon,
    .van-nav-bar__title {
      color: #ffffff;
    }
    .right-text {
      color: #ffffff;
    }
  }
  &.black {
    .van-icon,
    .van-nav-bar__title {
      color: #333333;
    }
    .right-text {
      color: rgba(0, 0, 0, 0.78);
    }
  }
  &.red {
    background: linear-gradient(90deg, @notice-red 0%, @notice-red 100%);
    .van-icon,
    .van-nav-bar__title {
      color: #ffffff;
    }
    .right-text {
      color: #ffffff;
    }
  }
  &__message {
    position: relative;
    display: inline-block;
    height: 22px;
    line-height: 22px;
    margin-left: 8px;
    .van-badge--dot {
      position: absolute;
      top: 2px;
      right: 4px;
    }
  }
  .van-nav-bar__left,
  .van-nav-bar__right {
    padding: 0 12px;
  }
  .iconimg {
    width: 22px;
  }
  .right-text {
    margin-right: 4px;
    font-size: 16px;
  }
}
</style>
